import React, { Component } from 'react'
import "./mytest.scss"
import { Pagination } from 'antd';
import { getApiUserExamRecoed , getApiSearchInfo } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class mytest extends Component {


    state = {
        type:1,
        page:1,
        total:1,
        list:[],
        courseList:[],
        showCourse:false,
        course:'',
        finish:{
            total:0
        },
        todo:{
            total:0
        },
        keywords:'',
        showSecond:false,
        childList:[],
        name:""
    }

    componentWillMount(){
        

        this.getUserExamRecord();
        this.getSearchInfo();
    }

    componentDidMount(){
        window.scroll(0,0);
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({page})
        setTimeout(()=>{
            this.getUserExamRecord();
        },50)
    }

    gotoChooseCourse=(index)=>{
        let course = this.state.courseList[index];
        console.log(course);
        this.setState({
            course
        })

        setTimeout(()=>{
            this.getUserExamRecord();
        },50)
    }

    getSearchInfo=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiSearchInfo(param)
        .then( req =>{

            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    courseList:data
                })
            }
            
        }).catch( err =>{
            console.error(err);
        })
    }

    getUserExamRecord=(item)=>{
        let param = {
            token:get('token'),
            page:this.page,
            keyword:this.state.keywords,
            // course_id:this.state.course.id?this.state.course.id:'',
            types:get('type')?get('type'):0,
            // content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserExamRecoed(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    finish:data.finish,
                    list:data.finish.list,
                    total:data.finish.total,
                    todo:data.todo
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoSearch=()=>{
        this.getUserExamRecord(this.state.type);
    }

    gotoExam=(data)=>{
        this.props.history.push('/exam?id='+data.course_id+'&chapter_id='+data.chapter_id+"&content_id="+data.content_id);
    }

    render() {
        return (
            <div className="mytest">
                <div className="mhead">
                    <div className="title">
                        <div className="tname">
                            <h1 className={this.state.showSecond?"i_point":""} onClick={()=>{this.setState({showSecond:false})}}>我的考试</h1>
                            <img hidden={!this.state.showSecond} alt="" src="assets/img/xiaji.png" />
                            <h1 hidden={!this.state.showSecond}>{this.state.name}</h1>
                        </div>
                        <div className="right">
                            {/* <div className="selbox" onClick={()=>{
                                if(this.state.courseList.length === 0){
                                    message.info("暂无相关课程可选择！");
                                    return false;
                                }
                                this.setState({showCourse:!this.state.showCourse})
                                }}>
                                <p className={this.state.course.title?'pt':""}>{this.state.course.id?this.state.course.title:'选择相关课程'}</p>
                                <img alt="" src="assets/imgs/xialaxuanze.png" />
                                <div className="sels" hidden={!this.state.showCourse} onMouseLeave={()=>{this.setState({showCourse:false})}}>
                                    {
                                        this.state.courseList.map((item,index)=>{
                                            return <h4 key={index} className={this.state.course.id === item.id?'hover':''} onClick={()=>{this.gotoChooseCourse(index)}}>{item.title}</h4>
                                        })
                                    }
                                </div>
                            </div> */}
                            {/* <input type="text" placeholder="输入考试名称" value={this.state.keywords} onChange={(ev)=>{this.setState({keywords:ev.target.value})}} />
                            <button onClick={()=>{this.gotoSearch()}}>搜索</button> */}
                        </div>
                    </div>
                    <div className="mtypes" hidden={this.state.showSecond}>
                        <div className={this.state.type === 1?"item active":"item"} onClick={()=>{this.setState({type:1,list:this.state.finish.list,total:this.state.finish.total})}}>
                            <h2>已完成</h2>
                            <div className="num" hidden={this.state.finish.total === 0}>{this.state.finish.total}</div>
                            <div className="span"></div>
                        </div>
                        <div className={this.state.type === 2?"item active":"item"} onClick={()=>{this.setState({type:2,list:this.state.todo.list,total:this.state.todo.total})}}>
                            <h2>待完成</h2>
                            <div className="num" hidden={this.state.todo.total === 0}>{this.state.todo.total}</div>
                            <div className="span"></div>
                        </div>
                    </div>
                </div>

                <div className="tmain" hidden={this.state.showSecond}>
                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无考试记录</p>
                    </div>

                    <div hidden={this.state.type === 2}>
                    {
                        this.state.list.map((item,index)=>{
                            return <div className="item2" key={index}>
                                        <h2>{item.title}</h2>
                                        <button onClick={()=>{this.setState({childList:item.child,showSecond:true,name:item.title})}}>查看</button>
                                    </div>
                        })
                    }
                    </div>
                    <div hidden={this.state.type === 1}>
                    {
                        this.state.list.map((item,index)=>{
                            return <div className="item2" key={index}>
                                        <h2>{item.title}</h2>
                                        <button onClick={()=>{this.setState({childList:item.child,showSecond:true,name:item.title})}}>查看</button>
                                    </div>
                        })
                    }
                    </div>
                </div>

                <div className="tmain" hidden={!this.state.showSecond}>
                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无考试记录</p>
                    </div>


                    <div>
                    {
                        this.state.childList.map((item,index)=>{
                            return <div className="item" key={index}>
                                        <div className="itop">
                                            <div className="ileft">
                                                <h2>{item.title}</h2>
                                                <span>{item.course_title}</span>
                                            </div>
                                            <button onClick={()=>{this.gotoExam(item)}}>开始考试</button>
                                        </div>
                                        <div className="iright" style={{marginTop:"20px"}}>
                                            <p>最高分：{item.score}分｜及格分：{item.pass_score}分｜用时：{item.time}分钟｜题数：{item.nums}题</p>
                                            <span></span>
                                        </div>
                                    </div>
                        })
                    }
                    </div>
                </div>

                <div className='r_page' hidden={this.state.list.length === 0}>
                    <Pagination type="primary" showSizeChanger={false} pageSize={5}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                </div>
            </div>
        )
    }
}
